const React = require('react');
const {
    View,
    StyleSheet,
    Animated,
    Easing,
} = require('react-native');
const {
    JDTextInput,
    JDText,
    JDDevice,
    JDButton,
    JDRouter,
    JDSearchInput,
    JDScrollTop,
    JDScrollView,
    JDImage,
    JDTouchable
} = require('@areslabs/jdreact-core-lib');

const PageContainer = require('../components/PageContainer');
const ContentHeader = require('../components/ContentHeader');
const PulldownMenu = require('../components/PulldownMenu');
const Menus = require('../components/Menus');
const routes = require('../routes');
const pkginfo = require('../../../package.json');
const config = require('../config');

class APIIndex extends React.Component {
    constructor(props) {
        super(props);
        this.searchRoutes = [];
        let apiRoutes = routes.apiRoutes.map((item,index)=>{
            return {
                ...item,
                pages:item.pages.filter((sItem)=>{
                    if(!config.isJDAPP && sItem.nativeDepend){
                    }else{
                        return sItem
                    }
                })
            }
        })
        apiRoutes.forEach((item, index) => {
            this.searchRoutes = this.searchRoutes.concat(item.pages)
        })

        this.state = {
            search: '',
            routes: apiRoutes,
            searchRoutes: [],
        };
    }

    render() {
        return (
            <PageContainer title="JDReact API展示">
                <JDSearchInput
                    style={styles.searchInput}
                    placeholder="搜索API"
                    onChangeText={value => {
                        const lowerValue = value.toLowerCase();
                        const searchedRouteKeys = this.searchRoutes.filter(route => {
                            return route.title.toLowerCase().indexOf(lowerValue) >= 0;
                        });
                        this.setState({
                            search: value,
                            searchRoutes: searchedRouteKeys,
                        });
                    }}
                />
                {(() => {
                    if (!!this.state.search) {
                        return (
                            <Menus routes={this.state.searchRoutes}/>
                        )
                    } else {
                        return (
                            <JDScrollView contentContainerStyle={styles.listView}>
                                <ContentHeader
                                    source={require('../images/art_work.png')}
                                    text={`以下将展示JDReact ${pkginfo.dependencies['@areslabs/jdreact-core-lib']} API能力，具体属性参数详见JDReact开发文档。`}
                                />
                                <PulldownMenu routes={this.state.routes} setNextRoutes={(nextState) => {
                                    this.setState({
                                        routes: nextState
                                    })
                                }}/>
                            </JDScrollView>
                        )
                    }
                })()}


            </PageContainer>
        );
    }

    componentToggle = (index) => {
        let nextState = [...this.state.routes]
        nextState[index].open = !nextState[index].open
        if (nextState[index].open) {
            nextState.forEach((sItem, sIndex) => {
                if (index !== sIndex) sItem.open = false
            })
        }
        this.setState({
            routes: nextState
        })
        if (nextState[index].open) {
            var timing = Animated.timing;
            Animated.sequence([
                //Animated.delay(800),
                Animated.parallel(['opa', 'height'].map(property => {
                    return timing(this.state[property], {
                        toValue: 1,
                        duration: 500,
                        easing: Easing.linear
                    });
                }))
            ]).start(() => {
                this.setState({
                    height: new Animated.Value(0),
                    opa: new Animated.Value(0),
                })
            });
        }
    };
}

const styles = StyleSheet.create({
    bodyPanel: {
        flex: 1,
        paddingTop: 10,
    },
    searchInput: {
        width: JDDevice.width - 40,
        marginHorizontal: 20,
        marginTop: 10,
    },
    listView: {
        marginTop: JDDevice.getDpx(20),
        paddingHorizontal: JDDevice.getRpx(20),
    },
    btn: {
        marginBottom: JDDevice.getRpx(20),
    },
});
module.exports = APIIndex;
